/*!
 * Basis javasript library 
 * http://code.google.com/p/basis-js/
 *
 * @copyright
 * Copyright (c) 2011
 *
 * @author
 *   Vladimir Ratsev
 *   Roman Dvornov
 *
 * @license
 * GNU General Public License v2.0 <http://www.gnu.org/licenses/gpl-2.0.html>
 */

 /*
  * Button
  */

  .Basis-Button
  {
    /* for border overlay when hover/active/focus */
    position: relative;
    z-index: 1;

    padding: 0;
    margin: 0;

    /* old IE padding fix */
    *overflow: visible;

    font-size: 85%;
    color: black;
    vertical-align: top;

    border: none;
    background: none;

    outline: none;
    cursor: pointer;
  }

 /*
  * Remove inner padding and border 
  * Fixes appearance displayed oddly in FF3/4
  * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
  */
  button.Basis-Button::-moz-focus-inner
  {
    border: 0;
    padding: 0;
  }

  .Basis-Button-Caption
  {
    display: block;
    position: relative;
    padding: .4em 0 .45em;
    margin: 0 1.5ex;
  }

  .Basis-Button-Back
  {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    /* old browsers */
    background: #D7D7D7 url(button_transparent_bg.png) repeat-x left center; 

   /*
    * SVG fallback(Opera 11.10-, IE9)
    * padding-box here, to avoid using svg for IE8
    */
    background: padding-box #D7D7D7 url();

    /* old webkit */
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .7)), color-stop(50%, rgba(255, 255, 255, .5)), color-stop(50%, rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, 0)));

    /* modern browsers */
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
    background-image: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));

    /* IE5.5 - IE7 */
    /*filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#F2F2F2,EndColorStr=#CFCFCF);*/

    /* IE8 */
    /*-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#F2F2F2,EndColorStr=#CFCFCF)";*/

    /* 1px inset border */
      -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;
      -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;

    border: 1px solid #C0C0C0;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
    border-radius: 2px;

    /* animation */
      -moz-transition: .1s ease-in-out;
      -moz-transition-property: background-color, border-color, color, box-shadow, -moz-box-shadow;
      -webkit-transition: .1s ease-in-out;
      -webkit-transition-property: background-color, border-color, color, box-shadow, -webkit-box-shadow;
      -o-transition: .1s ease-in-out;
      -o-transition-property: background-color, border-color, box-shadow, color;
    transition: .1s ease-in-out;
    transition-property: background-color, border-color, box-shadow, color;
  }

  /* state & interaction */

  .Basis-Button:hover,
  .Basis-Button:focus,
  .Basis-Button:active
  {
    z-index: 2;
  }

  .Basis-Button:hover .Basis-Button-Back
  {
    background-color: #BCD7F2;
    border-color: #888;
  }

  .Basis-Button:focus .Basis-Button-Back
  {
    border-color: #888;
      -webkit-box-shadow: 0 0 3px 1px #B7D9FE inset;
      -moz-box-shadow: 0 0 3px 1px #B7D9FE inset;
    box-shadow: 0 0 3px 1px #B7D9FE inset;
  }

  .Basis-Button:active .Basis-Button-Back
  {
    background-color: #BCD7F2;
    border-color: #888;

      -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15) inset;
      -moz-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15) inset;
  }

  .Basis-Button.disabled,
  .disabled .Basis-Button
  {
    cursor: default;
    color: #888;
  }

  .Basis-Button.disabled .Basis-Button-Back,
  .disabled .Basis-Button .Basis-Button-Back
  {
    background-color: #F4F4F4;
    border-color: #C0C0C0;

      -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;
      -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  }

 /*
  * ButtonPanel
  */

  .Basis-ButtonGroup
  {
    display: inline;
    margin-right: 5px;
  }

  .Basis-ButtonGroup:last-child
  {
    margin-right: 0;
  }

  .Basis-ButtonGroup .Basis-Button .Basis-Button-Back
  {
    /* overlay for 1px on right */
    margin-right: -1px;

    /* remove border radius, only first and last buttons has border-radius */
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
    border-radius: 0;
  }

  .Basis-ButtonGroup .Basis-Button:first-child .Basis-Button-Back
  {
      -webkit-border-top-left-radius: 2px;
      -moz-border-radius-topleft: 2px;
    border-top-left-radius: 2px;

      -webkit-border-bottom-left-radius: 2px;
      -moz-border-radius-bottomleft: 2px;
    border-bottom-left-radius: 2px;
  }
  .Basis-ButtonGroup .Basis-Button:last-child .Basis-Button-Back
  {
    margin-right: 0;

      -webkit-border-top-right-radius: 2px;
      -moz-border-radius-topright: 2px;
    border-top-right-radius: 2px;

      -webkit-border-bottom-right-radius: 2px;
      -moz-border-radius-bottomright: 2px;
    border-bottom-right-radius: 2px;
  }
